<template>
  <div class="BookShelf">
    <!--<div class="BookShelf">-->
    <div class="bookhead">
      <div class="imgs">
        <img :src="require('../../assets/img/BookShelfAdvertorial/bg.png')" alt="">
      </div>
      <div class="tests">
        <div class="nickname">
          <img :src="items.vip_info.avatar" alt="">
        </div>
        <div class="booktext">
          <div class="username">{{items.vip_info.nickname}}</div>
          <div class="readday">在「十分读书」坚持阅读第{{items.vip_info.read_days}}天</div>
        </div>
      </div>
      <div class="bookboard">
        <div class="textleft">
          <p>扫码开始阅读，成为高情商 ，<br>
            会沟通，有底气的气质达人！</p>
          <div class="btnGo">
            <div class="bgyello"></div>
            <div class="yellotext">坚持阅读领200元现金</div>
          </div>
        </div>
        <div class="qrcode">
          <img :src="items.qr_code" alt="">
        </div>
      </div>
    </div>
    <div class="bookcontent">
      <div v-html="bookTextBody"></div>
    </div>
  </div>
</template>

<script>
  import Json from '../../Json/CardBg'
  import {Toast} from 'mint-ui'

  export default {
    name: 'index',
    data: function () {
      return {
        Math: Math.floor(Math.random() * Json.length),
        items: {
          qr_code: '',
          vip_info: {},
        },
        bookTextBody:'',
        BookShelfParams:sessionStorage.getItem('BookShelfParams')?JSON.parse(sessionStorage.getItem('BookShelfParams')):{},
        publicParams:sessionStorage.getItem('Ten_Vip_share_data') ? JSON.parse(sessionStorage.getItem('Ten_Vip_share_data')).data.qing_data:{}
      }
    },
    mounted: function () {
      // this.img = Json[this.Math].bg
      this.ShareCard(this.BookShelfParams)
    },
    methods: {
      ShareCard: function (data) {
        this.$axios.achievement_card(data).then(res => {
          var _this =  this
          if(res.data.qing_data.test_body) {
            this.items = res.data.qing_data
            this.items.vip_info.read_words = this.items.vip_info.read_words >= 1000 ? (this.items.vip_info.read_words / 1000).toFixed(1) + '千' : this.items.vip_info.read_words + ''
            this.bookTextBody = this.$Mate.qingReadTextRetuen(res.data.qing_data.test_body.attach_body)
            // this.init()
            // this.canvasinit()
            // res.data.qing_data.next_share_info.share_id = this.$route.query.share_id || data.share_id
            // res.data.qing_data.next_share_info.share_token = this.$route.query.share_token || data.share_token
            this.Share(this.publicParams)
          }else{
            _this.go('BookShelf',_this.BookShelfParams)
          }
        })
      },
      Share: function (str) {
        var _this = this
        var obj = {}
        var data = {
          title: str.title,
          desc: str.desc,
          link: str.link,
          imgUrl: str.img
        }
        obj.share_id = str.share_id
        obj.share_token = str.share_token
        this.$wx.ShareTimeline(data, res => {
          obj.share_mode = res.share_mode
          obj.share_type = 21
          _this.share_done(obj)
        })
        this.$wx.ShareAppMessage(data, res => {
          obj.share_mode = res.share_mode
          obj.share_type = 21
          _this.share_done(obj)
        })
      },
      share_done: function (obj) {
        this.$axios.share_done(obj).then(res => {
          this.shares = false
          if (res.data.qing_code !== 100) {
            Toast({
              message: '打卡失败',
              iconClass: 'iconfont icon-bangdingshibai',
              duration: 5000
            })
          } else {
            Toast({
              message: '分享成功',
              iconClass: 'iconfont icon-tianjiachenggong',
              duration: 3000
            })
          }
        })
      },
      go: function (name, obj) {
        this.$router.push({
          name: name,
          query: obj || {}
        })
      },
    },
    components: {}
  }
</script>

<style scoped>
  @import "../../assets/css/views/BookShelfAdvertorial/index.css";

  img {
    width: 100%;
  }
</style>
